<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线路站点客流分析 - 哈尔滨公共交通数据分析</title>
    <link rel="stylesheet" href="css/style.css?v=1.1">
    <style>
        /* Styles specific to this page to avoid affecting other pages */
        .controls-container {
            padding: 25px;
            background-color: #f9f9f9;
            border: 1px dashed #ccc;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .chart-container-specific {
            width: 100%;
            height: 500px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            box-sizing: border-box;
        }

        /* Safe, isolated style for the dropdown */
        .route-select-isolated {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px 35px 10px 15px;
            font-size: 1em;
            color: #333;
            cursor: pointer;
            background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23555%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
            background-repeat: no-repeat;
            background-position: right 12px top 50%;
            background-size: 12px auto;
            transition: all 0.2s ease-in-out;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            min-width: 80px;
        }

        .route-select-isolated:hover {
            border-color: #007bff;
        }

        .route-select-isolated:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
        }

        .controls-container label {
            margin-right: 15px;
            font-size: 1.1em;
            color: #444;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
    </style>
</head>

<body>
    <div class="navbar">
        <a href="index.html">首页</a>
        <a href="traffic_trend.html">客流趋势分析</a>
        <a href="station_ranking.html">站点客流排行</a>
        <a href="funnel_analysis.html">线路站点客流分析</a>
        <a href="line_comparison.html">线路客流量对比</a>
        <a href="transfer_heatmap.html">换乘热度分析</a>
        <a href="poi_analysis.html">站点周边客流特征</a>
        <a href="anomaly_detection.html">异常客流检测</a>
        <a href="od_analysis.html">路径OD分析</a>
        <a href="stop_frequency_usage_analysis.html">站停频率分析</a>
        <a href="dispatch_suggestion.html">智能调度模型</a>
    </div>
    <div class="page-container">
        <div class="chart-header">
            <h2 class="chart-title">线路站点客流分析</h2>
            <p class="chart-description">
                此图表展示了特定公交或地铁线路上，各个站点的具体上下车客流人数。通过对比各站点的上车与下车数据，可以直观地了解线路的客流热点区域、主要客流来源及去向，为优化站点设施、调整运营班次提供数据支持。
            </p>
            <div class="controls-container">
                <label for="route-id-select">选择线路ID:</label>
                <select id="route-id-select" onchange="fetchData()" class="route-select-isolated">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="6">6</option>
                    <option value="8">8</option>
                    <option value="11">11</option>
                    <option value="31">31</option>
                    <option value="55">55</option>
                    <option value="67">67</option>
                    <option value="76">76</option>
                    <option value="101">101</option>
                    <option value="118">118</option>
                </select>
            </div>
        </div>
        <div class="kpi-cards-container">
            <div class="kpi-card">
                <h4>线路总客流</h4>
                <p id="kpi-total-traffic">--</p>
            </div>
            <div class="kpi-card">
                <h4>最繁忙站点</h4>
                <p id="kpi-busiest-station">--</p>
            </div>
            <div class="kpi-card">
                <h4>最大上客站</h4>
                <p id="kpi-top-onboard">--</p>
            </div>
            <div class="kpi-card">
                <h4>最大下客站</h4>
                <p id="kpi-top-offboard">--</p>
            </div>
        </div>
        <div id="station-analysis-chart" class="chart-container-specific"></div>
    </div>

    <script src="js/echarts.min.js"></script>
    <script type="text/javascript">
        var stationAnalysisChart = echarts.init(document.getElementById('station-analysis-chart'));

        function fetchData() {
            var routeId = document.getElementById('route-id-select').value;
            if (!routeId) {
                alert('请选择一个线路ID');
                return;
            }

            fetch(`/api/route/funnel/${routeId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应错误');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.length === 0) {
                        alert('没有找到该线路的数据');
                        stationAnalysisChart.setOption({
                            title: {
                                subtext: `线路ID: ${routeId} (无数据)`,
                            },
                            series: []
                        });
                        return;
                    }

                    // --- KPI Card Calculations ---
                    let totalTraffic = 0;
                    let busiestStation = { name: '无', total: 0 };
                    let topOnboardStation = { name: '无', onboard: 0 };
                    let topOffboardStation = { name: '无', offboard: 0 };

                    data.forEach(station => {
                        const stationTotal = station.onboard + station.offboard;
                        totalTraffic += stationTotal;

                        if (stationTotal > busiestStation.total) {
                            busiestStation = { name: station.stationName, total: stationTotal };
                        }
                        if (station.onboard > topOnboardStation.onboard) {
                            topOnboardStation = { name: station.stationName, onboard: station.onboard };
                        }
                        if (station.offboard > topOffboardStation.offboard) {
                            topOffboardStation = { name: station.stationName, offboard: station.offboard };
                        }
                    });

                    document.getElementById('kpi-total-traffic').textContent = `${totalTraffic.toLocaleString()} 人次`;
                    document.getElementById('kpi-busiest-station').textContent = busiestStation.name;
                    document.getElementById('kpi-top-onboard').textContent = topOnboardStation.name;
                    document.getElementById('kpi-top-offboard').textContent = topOffboardStation.name;
                    // --- End of KPI Card Calculations ---

                    var stationNames = data.map(item => item.stationName);
                    var onboardData = data.map(item => item.onboard);
                    var offboardData = data.map(item => item.offboard);

                    var barChartOption = {
                        title: {
                            text: '线路站点客流分析',
                            subtext: `线路ID: ${routeId}`,
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['上车人数', '下车人数'],
                            top: 'bottom'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '10%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: stationNames.reverse()
                        },
                        series: [
                            {
                                name: '上车人数',
                                type: 'bar',
                                data: onboardData.reverse()
                            },
                            {
                                name: '下车人数',
                                type: 'bar',
                                data: offboardData.reverse()
                            }
                        ]
                    };
                    stationAnalysisChart.setOption(barChartOption);
                })
                .catch(error => {
                    console.error('获取数据失败:', error);
                    alert('获取数据失败，请检查后端服务是否开启或线路ID是否正确。');
                });
        }

        document.addEventListener('DOMContentLoaded', function () {
            fetchData();
        });

        window.addEventListener('resize', function () {
            stationAnalysisChart.resize();
        });
    </script>
    <script src="js/common.js"></script>
</body>

</html>